<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:comp="http://java.sun.com/jsf/composite/ezcomp"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:p="http://primefaces.org/ui">
    <ui:composition template="/template.xhtml">
        <ui:define name ="title">
            <h:outputText value="Quiz Editor"/>
        </ui:define>
        <ui:define name ="body">
            <h:form>
            <rich:messages globalOnly="false"/>
            <h1>#{quizBuilder.quiz.title}</h1>
            <h:outputLabel value ="Quiz Title"/>
            <a4j:region id ="quizName">
            <h:inputText value ="#{quizBuilder.quiz.title}"/>
            </a4j:region>
            <a4j:region id ="questionSets">
                <p:dataGrid value="#{quizBuilder.quiz.questionSets}"
                            var="qSet"
                            columns ="1"
                            rows ="10"
                            paginator="true"
                            paginatorPosition="bottom"
                            emptyMessage="No Question Sets"
                            styleClass="outer"
                            >
                <p:column>
                <div class ="questionSet">
                    <p:dataGrid value ="#{qSet.questions}"
                                var ="question"
                                columns ="3"
                                rows ="1"
                                paginator ="true"
                                paginatorPosition ="bottom"
                                emptyMessage="No Questions"
                                >                        
                        <p:column>
                            <div class ="QAquestion">
                                <p:dataGrid value="#{question.clues}"
                                            var ="clue"
                                            columns="3"
                                            rows="1"
                                            styleClass ="clueDataGrid"
                                            paginator="true"
                                            paginatorPosition="bottom"
                                            emptyMessage="No Clues"
                                            >
                                    <p:column>                                           
                                        <h:commandButton value="Remove" action ="#{quizBuilder.removeClue(question, clue)}"/>
                                        <comp:clue clue="#{clue}"/>
                                    </p:column>
                                </p:dataGrid>
                                <a4j:region>
                                    <h:selectOneListbox value="#{quizBuilder.newClueType}">
                                        <f:selectItems value="#{quizBuilder.clueTypes}"/>
                                    </h:selectOneListbox>
                                <h:commandButton value ="add clue" action ="#{quizBuilder.addClue(question)}"/> 
                                </a4j:region>
                                <h:outputLabel value="Solution"/>
                                <h:inputText value="#{question.solution.text}"/> 
                                <a4j:commandButton render ="@all" execute="@all" value ="Delete Question" action="#{quizBuilder.removeQuestion(qSet, question)}"/>
                            </div>
                        </p:column>
                    </p:dataGrid>
                    <a4j:commandButton render ="@all" execute="@all" value ="add question" action="#{quizBuilder.addQuestion(qSet)}"/>
                </div>
                    <a4j:commandButton render ="@all" execute="@all" value ="Delete question set" action="#{quizBuilder.removeQuestionSet(qSet)}"/>
                </p:column>
            </p:dataGrid>
            <a4j:commandButton render="@all" execute ="@all" value ="Add A new question set" action ="#{quizBuilder.addQuestionSet}"/>
            </a4j:region>
            <a4j:commandButton execute="@all" value ="save" action ="#{quizBuilder.createQuiz()}"/>
            </h:form>
        </ui:define>
        
    </ui:composition>
</html>

